import {
  IosArrowRtl24Regular,
  Delete28Filled,
} from "@vicons/fluent";
import { NButton, NCard, NIcon } from "naive-ui";
import { PropType } from "vue";
import { flowNodeTheme, delDesignNode } from "@/hooks/useWflow";
import { DesignNode } from "@/types/index";
import AddFlowNodeBtn from "./AddFlowNodeBtn";
import "./style.css";
interface Props {
  nodeItem: DesignNode;
}
export default defineComponent({
  name: "DesignNode",
  props: {
    nodeItem: {
      type: Object as PropType<Props["nodeItem"]>,
    },
  },
  setup(props) {
    let { nodeItem } = props;
    const handleDelDesignNode = () => {
      delDesignNode(nodeItem?.id as string);
    };
    return () => (
      <div class="node-wrap border-x-inherit w-52 cursor-pointer relative">
        <NCard
          contentStyle={{
            padding: 0,
          }}
        >
          <div class="flow-node p-3">
            <div
              class="flow-node-cd absolute right-0 z-10"
              style={{
                top: "-26px",
              }}
            >
              <NButton
                size="tiny"
                onClick={handleDelDesignNode}
                secondary
                type="primary"
              >
                <NIcon size={15} component={Delete28Filled} />
              </NButton>
            </div>
            <div class="head box-border text-base font-bold flex items-center">
              <NIcon
                size={25}
                color={flowNodeTheme[nodeItem?.type as string][1]}
                component={flowNodeTheme[nodeItem?.type as string][0]}
              />
              <span class="ml-1">{nodeItem?.name}</span>
            </div>
            <div class="center box-border mt-2">
              <NButton
                strong
                secondary
                block
                type="tertiary"
                iconPlacement="right"
                style={{
                  justifyContent: "space-between",
                }}
              >
                {{
                  icon: () => {
                    return <NIcon component={IosArrowRtl24Regular} />;
                  },
                  default: () => "请选择",
                }}
              </NButton>
            </div>
          </div>
        </NCard>
        <AddFlowNodeBtn nodeItem={nodeItem} />
      </div>
    );
  },
});
